import React from 'react'
import {withRouter,} from 'react-router-dom'
import SpyderModel from "../../../model/Spyder";
import Admin from "../../../layout/Admin";

import Info from "../../../service/info";

import {Button, Input, PageHeader, Select, Switch,} from "antd";
const { Option } = Select

class Spyder extends React.Component {

    constructor(props) {
        super(props)
        this.model = new SpyderModel()
        this.state = {
            on: 'on',
            priority: [],
            newPriorities: [],
            newPriority: '',
        }
    }

    componentDidMount() {
        this.get()
        this.getPriority()
    }

    get = () => {
        this.model
            .get()
            .then((resp) => {
                this.setState({
                    on: resp.data.ok,
                })
            })
    }



    getPriority = () => {
        this.model
            .getPriority()
            .then(res => {
                const data = res.data.ok || []
                const priority = data
                    .map(levelArray => {
                        return levelArray.map((option, index) => {
                            const o = {
                                label: option,
                                value: index,
                                key: index
                            }
                            return o
                        })
                    })
                this.setState({
                    priority,
                    newPriorities: [...priority],
                })
            })
    }

    onSwitch = (value) => {
        const Flag = value ? 'on' : 'off'
        this.model
            .switch({Flag})
            .then(res => {
                console.log(res)
                if (res.data.ok === 1) {
                    const msg = value ? '开启成功' : '关闭成功'
                    Info.success(msg)
                }
            })
            .then(() => this.get())
    }

    onPriorityOptionChange = (value, level,) => {
        const priority = this.state.newPriorities
        priority[level] = value
        this.setState({
            newPriorities: priority,
        })
    }

    addNewPriority = (level,) => {
        const p = this.state.newPriority
        const priority = [...this.state.priority]

        // priority[level].push({
        //     label: p,
        //     value: priority[level].length,
        //     key: priority[level].length,
        // })
        const options = priority[level]
        const newOption = {
            label: p,
            value: options.length,
            key: options.length,
        }
        priority[level] = [...options, newOption,]

        this.setState({
            priority,
            newPriorities: priority.slice(),
            newPriority: '',
        })
    }

    deletePriorityLevel = (level,) => {
        const ps = [...this.state.priority]
        const nPs = [...this.state.newPriorities]
        ps.splice(level, 1)
        nPs.splice(level, 1)

        this.setState({
            priority: ps,
            newPriorities: nPs,
        })
    }

    onPrioritySubmit = () => {
        const newPs = this.state.newPriorities
        const Data = newPs.map(optionArrays => {
            return optionArrays.map(option => {
                return option.label
            })
        })
        this.model.setPriority({
            Data,
        }).then(res => {
            if (res.data.ok === 1) {
                Info.success('修改成功')
            }
        }).then(() => {
            this.getPriority()
        })
    }

    addPriorityLevel = () => {
        const newPs = [...this.state.newPriorities]
        newPs.push([])
        const ps = [...this.state.priority]
        ps.push([])

        this.setState({
            priority: ps,
            newPriorities: newPs,
        })
    }

    render() {

        const priority = this.state.priority
        const newPriorities = this.state.newPriorities

        const priorityOptions = priority.map((array, level) => {

            const select = <Select
                mode="multiple"
                labelInValue
                allowClear
                style={{ width: '50%' }}
                placeholder="Please select"
                // defaultValue={array}
                // onChange={handleChange}
                value={newPriorities[level]}
                key={level}
                onChange={(value) => this.onPriorityOptionChange(value, level)}
            >
                {array.map((option, optionIndex) => {
                    return <Option
                        value={option.value}
                        key={option.key}
                    >
                        {option.label}
                    </Option>
                })}
            </Select>

            const addNewPriority = <Button
                onClick={() => this.addNewPriority(level)}
            >添加字段</Button>

            const deletePriorityLevel = <Button
                onClick={() => this.deletePriorityLevel(level)}
            >
                删除队列
            </Button>

            const title = <p>
                优先级 {level + 1}:
            </p>

            return <div key={level} className="mb-16">
                {title}
                {select}
                {addNewPriority}
                {deletePriorityLevel}
            </div>
        })

        const newPriorityInput = <div className="mb-16">
            <Input
                style={{width: 200,}}
                placeholder="添加新关键字"
                value={this.state.newPriority}
                onChange={(e) => {
                    this.setState({
                        newPriority: e.target.value,
                    })
                }}
            />
        </div>

        const header = <div style={{background: '#fff'}}>
            <PageHeader title="爬虫管理"/>
        </div>
        const priorityHeader = <div style={{background: '#fff'}}>
            <PageHeader title="优先级管理"/>
        </div>
        return <Admin>

            <div className='list-container'>
                {header}
                <Switch
                    checkedChildren="开启"
                    unCheckedChildren="关闭"
                    checked={this.state.on === 'on'}
                    onChange={(value) => this.onSwitch(value)}
                />
                {priorityHeader}
                {newPriorityInput}
                {priorityOptions}
                <div>
                    <Button
                        style={{marginRight: 16,}}
                        onClick={this.addPriorityLevel}
                    >添加新队列</Button>
                    <Button
                        onClick={this.onPrioritySubmit}
                    >提交修改</Button>
                </div>

            </div>
        </Admin>
    }

}

export default withRouter(Spyder)